<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">

    </div>
</body>

</html>
<script>

    //创建组件:定义、注册、使用
    //下面的写法即为Vue.extend简写方式,里面书写曾经学习过组件配置项
    //下面的写法即为Vue.extend简写方式，直接书写配置项即可。
    let App = {
          //组件name配置项,对于组件的使用没有任何影响,只不过name配置项
           //会影响到开发者工具里面审查组件的显示名字而已
           name:'Dabai',
        data() {
            return { name: '下午喝粥吧' };
        },
        template: `
              <div>
                 <h1 @click="handler">{{name}}</h1> 
              </div>
           `,
        methods: {
            handler() {
                this.name = '那就喝点白开水把';
                console.log(this);
            }
        }
    }

    //关联VM
    const VM = new Vue({
        el: '#app',
        template: `
           <App></App>
         `,
        components: {
                //注册组件的时候K，决定了组件在使用的时候，这个标签名字
            //开发者工具中审查组件的时候，也是显示K 
            App
        }
    })
</script>